<script setup>
import TheMain from './components/TheMain.vue'
import TheHeader from './components/TheHeader.vue'
import TheLeft from './components/TheLeft.vue'
import TheRight from './components/TheRight.vue'
import TheFooter from './components/TheFooter.vue'
import SwiperSlide from './components/TheSwapper.vue'
</script>

<template>
  <header>
    <div>
      <TheHeader></TheHeader>
      <SwiperSlide></SwiperSlide>
      <div class="main">
        <TheLeft></TheLeft>
        <TheMain></TheMain>
        <TheRight></TheRight>
      </div>
      <TheFooter></TheFooter>
    </div>
  </header>

  <main>
  </main>
</template>

<style scoped>
  .main {
    display: flex;
    justify-content: space-between;
  }
</style>
